<template>
    <button class="button"
            :class="type">
        <slot />
    </button>
</template>

<script>
    export default {
        name: 'my-button',

        props: {
            type: {
                type: String,
                default: ''
            }
        }
    }
</script>

<style lang="scss" scoped>
    .button {
        padding: 10px 20px;
        border: 1px solid #000;
        background-color: #fff;
        font-size: 14px;

        &.danger {
            color: #fff;
            background-color: orangered;
            border-color: orangered;
        }
    }
</style>
